<template>
	<view class="container">
		<z-paging ref="paging" v-model="dataList" @query="queryList" :auto="false">
			<view slot="top">
				<view class="search-header">
					<view class="search-bar-box">
						<view class="search-bar">
							<u-icon name="search" size="20" color="#999999"></u-icon>
							<input type="text" placeholder="请输入关键字搜索" placeholder-class="placeholder" v-model="keywords"
								@input="$u.throttle(refreshList, 1000)" />
							<u-icon name="plus-circle" size="20" color="#FE4F04" @click="navigatorToAdd"
								v-if="showAdd"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="building-list">
				<!-- @click="selectedId = item.id" -->
				<view class="building-item" v-for="(item, index) in dataList" :key="index"
					@click="confirmSelectData(item)">
					<view :class="selectedId === item.id?'building-name active':'building-name'">{{ item.name }}
					</view>
					<u-icon name="checkbox-mark" color="#FE4F04" size="28" v-if="selectedId===item.id"></u-icon>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import {
		addressList
	} from '@/api/landlord'
	export default {
		data() {
			return {
				showAdd: true,
				keywords: '',
				zone_id:null,
				zone:null,
				selectedId: null, // 选中的地址ID
				dataList: []
			}
		},
		onLoad(options) {
			if (options && options.showAdd === 'false') {
				this.showAdd = false;
			}
			if (options && options.zone_id) {
				this.zone_id = options.zone_id;
				this.zone = options.zone;
			}
		},
		onShow() {
			this.refreshList()
		},
		methods: {
			navigatorToAdd() {
				uni.navigateTo({
					url: '/pages-landlord/landlord/buildings?zone_id='+this.zone_id+'&zone='+this.zone
				})
			},
			refreshList() {
				if (this.$refs.paging) {
					this.$refs.paging.refresh();
				}
			},
			confirmSelectData(item) {
				let that = this
				uni.$u.throttle(() => {
					that.selectedId = item.id
					uni.$emit('selectBuilding', item);
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					}, 200)
				}, 3000)
			},
			queryList(pageNo, pageSize) {
				addressList({
					kw: this.keywords,
					page: pageNo,
					page_size: pageSize,
					zone_id:this.zone_id
				}).then(res => {
					console.log(res)
					this.$refs.paging.complete(res.data.data);
				}).catch(res => {
					this.$refs.paging.complete(false);
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		height: 100%;
		background-color: #F5F6F7;
	}

	.search-header {
		flex-shrink: 0;
		padding: 20rpx 30rpx;

		.search-bar-box {
			display: flex;
			align-items: center;

			.search-bar {
				flex: 1;
				border-radius: 36rpx;
				display: flex;
				align-items: center;
				background: #FFFFFF;
				padding: 16rpx 24rpx;
			}

			.search-bar input {
				flex: 1;
				margin: 0 20rpx;
				font-size: 14px;
			}

			.placeholder {
				color: #999999;
			}
		}
	}

	.building-list {
		margin: 0 32rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.01);
		border-radius: 16rpx;

		.building-item {
			display: flex;
			padding: 20rpx 40rpx;
			align-items: center;
			justify-content: space-between;
			min-height: 60rpx;

			.building-name {
				flex: 1;
				font-size: 28rpx;
				color: #666666;
			}

			.active {
				color: #FE4F04;
			}
		}
	}
</style>